<template>
	<view class="content">
		<view class="flex-row tab-line">
			<template v-for="item in tabList">
				<view class="tab" :class="tabIndex===item.value?'active':''" @tap="changeTab(item)">{{item.name}}</view>
			</template>
		</view>
		<view class="tab-content" v-for="(item,index) in list" :key="index">
			<view class="flex-column">
				<view class="line name">
					<!-- <view class="mr-20">
						xxx冷库
					</view> -->
					<view>
						{{item.deviceName}}
					</view>
				</view>
				<view class="line">
					异常指标名称：{{item.confItemTitle}}
				</view>
				<template v-if="tabIndex!=3">
					<view class="line">
						当时异常值：{{item.record}}
					</view>
					<view class="line">
						正常值范围：{{item.min + '~' + item.max}}
					</view>
				</template>
				<template v-else>
					<view class="line">
						开门时间：{{item.startTime}}
					</view>
					<view class="line">
						关门时间：{{item.endTime}}
					</view>
				</template>
				<!-- <view class="line">
					目前最新值：{{item.confItemTitle}}
				</view> -->
				<view class="line end">
					{{item.createTime}}
				</view>
			</view>
		</view>
		<view class="flex-row nodata" v-if="!list.length">
			<view class="flex-1">
				暂无预警
			</view>
		</view>
		<page-pagination style="margin-top: 20rpx;" v-if="list.length" :total="total" :pageSize="pageSize" :currentPage="pageNo" numAround :btnText="true" @change="change"></page-pagination>
		<!-- <uni-load-more iconType="circle" :status="status" :iconSize="20" v-if="showLoadMore"></uni-load-more> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				preList: [
					{name: '用电预警',titleKey: 'ele_manager',value: 1},
					{name: '环境变量',titleKey: 'environment_manager',value: 2},
					{name: '库门开关预警',titleKey: 'door_manager',value: 3}
				],
				tabList: [],
				tabIndex: '',
				pageSize: 10,
				pageNo: 1,
				pageCount: null,
				total: null,
				status: 'noMore',
				showLoadMore: false,
				list: []
			};
		},
		onLoad() {
			this.getTab()
		},
		methods: {
			changeTab(e){
				this.tabIndex = e.value
				this.pageNo = 1
				this.status = "loading"
				this.showLoadMore = false
				this.getData()
			},
			getTab(){
				this.$api.get('api/mobile/getMyModule').then(res => {
					let list = res.result
					let tabList = []
					this.preList.forEach(item=>{
						for(let i in list){
							if(list[i].titleKey === item.titleKey){
								tabList.push(item)
								break
							}
						}
					})
					this.tabList = tabList
					if(this.tabList.length){
						this.tabIndex = this.tabList[0].value
					}
					this.getData()
				})
			},
			getData(){
				this.$api.get('api/mobile/warnList',{
					id: this.tabIndex,
					pageSize: this.pageSize,
					pageNo: this.pageNo
					}).then(res => {
					// if (this.pageNo > 1) {
					// 	this.list = this.list.concat(res.result.records);
					// } else {
						this.list = res.result.records
					// }
					this.pageCount = res.result.pages
					this.total = res.result.total
				})
			},
			change(currentPage, type){
				this.pageNo = currentPage;
				this.getData();
				console.log("点击了" + type + "，当前页：" + currentPage);
			}
		},
		// onReachBottom() {
		//     this.pageNo++;
		//     if (this.pageNo > this.pageCount) {
		//        this.status = "nomore"
		//         return;
		//     }
		// 	this.showLoadMore = true
		//     this.status = "loading"
		//     setTimeout(() => {
		//         this.getData();
		//     }, 300);
		// }
	}
</script>

<style lang="scss">
.content{
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	.tab-line{
		border-bottom: 1rpx solid #e2e2e2;
		.tab{
			padding: 20rpx 10rpx;
			font-size: $uni-font-size-30;
			font-weight: bold;
			color: #333333;
			&.active{
				color: #eb1809;
				position: relative;
				&::after{
					content: '';
					height: 8rpx;
					width: 50rpx;
					background-color: #eb1809;
					border-radius: 8rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%);
				}
			}
		}
	}
	.tab-content{
		margin-top: 20rpx;
		padding: 20rpx;
		border: 1rpx solid #d4d4d4;
		border-radius: 8rpx;
		.line{
			display: flex;
			color: #333333;
			font-size: $uni-font-size-28;
			padding: 10rpx 20rpx;
		}
		.name{
			font-size: $uni-font-size-32;
			font-weight: 600;
		}
		.end{
			justify-content: flex-end;
		}
		.mr-20{
			margin-right: 20rpx;
		}
	}
	.nodata{
		padding: 20rpx 0;
		font-size: $uni-font-size-30;
		justify-content: center;
	}
}
</style>
